<!--
 * @Author: “lixiaojuan6851” 1401125373@qq.com
 * @Date: 2024-12-18 21:30:08
 * @LastEditors: “lixiaojuan6851” 1401125373@qq.com
 * @LastEditTime: 2024-12-18 22:16:00
 * @FilePath: \qsm\login.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>用户登录</title>
    <style>
        /* 全局样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        /* 表单容器样式 */
        .login-container {
            background-color: white;
            padding: 2rem;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 400px;
            text-align: center;
        }

        /* 标题样式 */
        h2 {
            margin-bottom: 1rem;
            color: #333;
        }

        /* 表单元素样式 */
        label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: bold;
            color: #555;
        }

        input[type="text"],
        input[type="password"] {
            width: 100%;
            padding: 0.75rem;
            margin-bottom: 1rem;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 1rem;
            box-sizing: border-box;
        }

        /* 按钮样式 */
        .button-container {
            display: flex;
            justify-content: space-between;
            gap: 1rem;
        }

        button {
            flex: 1;
            padding: 0.75rem;
            font-size: 1rem;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        #loginButton {
            background-color: #28a745; /* 绿色 */
        }

        #clearButton {
            background-color: #dc3545; /* 红色 */
        }

        #loginButton:hover {
            background-color: #218838;
        }

        #clearButton:hover {
            background-color: #c82333;
        }

        /* 响应式设计 */
        @media (max-width: 600px) {
            h2 {
                font-size: 1.5rem;
            }

            button {
                font-size: 0.9rem;
                padding: 0.6rem;
            }
        }

        /* 动画效果 */
        .login-container {
            opacity: 0;
            animation: fadeIn 1s forwards;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
    </style>
  
</head>
<body>
  <div class="login-container">
    <h2>用户登录</h2>
    <form id="loginForm">
        <label for="username">用户名：</label>
        <input type="text" id="username" maxlength="20" required>

        <label for="password">密码：</label>
        <input type="password" id="password" maxlength="20" required>

        <div class="button-container">
            <button type="submit" id="loginButton">登录</button>
            <button type="button" id="clearButton">清空</button>
        </div>
    </form>
</div>
  <script>
    document.getElementById('clearButton').addEventListener('click', () => {
      document.getElementById('username').value = '';
      document.getElementById('password').value = '';
      alert('内容已清空');
    });
    document.getElementById('loginForm').addEventListener('submit', async (e) => {
      e.preventDefault();
      const username = document.getElementById('username').value.trim();
      const password = document.getElementById('password').value.trim();
      if (!username || !password) {
        alert('用户名和密码不能为空！');
        return;
      }
      if (username.length > 20 || password.length > 20) {
        alert('用户名和密码长度不能超过 20 个字符！');
        return;
      }
      const response = await fetch('/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ username, password })
      });
      const result = await response.json();
      if (result.success) {
        window.location.href = '/success.html?timestamp=' + Date.now();
      } else {
        alert('用户名或者密码不正确');
      }
    });
  </script>
</body>
</html>